<template>
  <div>
    <el-row style="margin-bottom:10px; margin-left:60%">
      <!--<el-button type="primary" size="mini">
        <el-link :href="jumpDress" :underline="isUnderline" target="_blank" style="color:#ffffff;font-size: 12px;">宝贝管理</el-link>
      </el-button>
      <el-button type="primary" size="mini" @click="refresh">刷新</el-button>-->
      <el-input v-model="query" clearable placeholder="请输入宝贝标题" style="width: 200px;" size="mini" class="filter-item" @keyup.enter.native="toQuery"/>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
    </el-row>
    <el-table
      :data="data"
      style="width: 100%"
      @row-click="selectRow">
      <el-table-column
        prop="date"
        label="宝贝"
        width="450">
        <template slot-scope="scope">
          <div style="display:flex;align-items: center;">
            <el-radio
              v-model="radio"
              :label="scope.row.commodity_id"
              style="display:flex;align-items: center;"
              @change="change(scope.row)">
              <el-image :src="scope.row.cover_url || scope.row.link_url&&scope.row.link_url[0].url?scope.row.link_url[0].url:''" style="width:40px;height:40px" fit="cover"/>
            </el-radio>
            <div>{{ scope.row.name }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="variety_name"
        label="分类"
        align="center"
      />
    </el-table>
    <el-pagination
      :total="total"
      :current-page="page + 1"
      background
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange" />
    <div
      slot="footer"
      class="dialog-footer"
      style="margin-left:600px">
      <el-button
        size="small"
        @click="cancel">取消</el-button>
      <el-button
        :loading="loading"
        size="small"
        type="primary"
        @click="doSubmit">确认</el-button>
    </div>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import { mapGetters } from 'vuex'
export default {
  mixins: [initData],
  props: {
    rowData: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {}
    }
  },
  data() {
    return {
      radio: '',
      query: '',
      shelfList: {},
      isUnderline: false,
      jumpDress: ''
    }
  },
  computed: {
    // eslint-disable-next-line no-undef
    ...mapGetters(['shoppingCenteruRL', 'JumpMallUrl'])
  },
  watch: {
    rowData: {
      handler(newValue, oldValue) {
        this.radio = newValue.p_id
      },
      deep: true
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
      this.radio = this.rowData.p_id
    })
  },
  mounted() {
    this.jumpDress = '/commodity/list'
  },
  methods: {
    beforeInit() {
      this.showButton = false
      this.url = 'api/card-commodity-list'
      const sort = 'commodity_id,desc'
      const query = this.query
      const value = query.value
      this.params = { page: this.page, size: this.size, sort: sort, name: query }
      if (value) { this.params['name'] = value }
      return true
    },
    change(e) {
      // eslint-disable-next-line no-unused-vars
      this.shelfList = { p_id: e.commodity_id, p_name: e.name, type: 2 }
    },
    /* 触发父组件取消事件 */
    cancel() {
      this.$emit('fun', false)
    },
    /* 触发父组件确定事件 */
    doSubmit() {
      this.$emit('submit', this.shelfList)
    },
    refresh() {
      this.query = ''
      this.page = 0
      this.init()
    },
    selectRow(e) {
      this.radio = e.commodity_id
      this.shelfList = { p_id: e.commodity_id, p_name: e.name, type: 2 }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
